<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<head>
	<title>Order</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="/css/home/style.css" rel="stylesheet" type="text/css" media="all"/>
	<script type="text/javascript" src="/js/common/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="/js/home/move-top.js"></script>
	<script type="text/javascript" src="/js/home/easing.js"></script>
</head>
<body>
  <div class="wrap">
	<div class="header">
		<div class="headertop_desc">
			<div class="call">
				<p><span>客服电话:</span><span class="number">188-1412-7570</span></p>
			</div>
			<div class="account_desc">
				<ul>
					<li><a href="#">Register</a></li>
					<li><a href="#">Login</a></li>
					<li><a href="#">Delivery</a></li>
					<li><a href="#">Checkout</a></li>
					<li><a href="#">My Account</a></li>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
		<div class="header_top">
			<div class="logo">
				<a href="/home/item.action?userId=${User.userId}&item=home"><img src="/images/icon/logo.png" alt="" /></a>
			</div>
			  <div class="cart">
					   <a href="/home/item.action?userId=${User.userId}&item=cart"><input type="button" class="input-button" value="去购物车结算"></a>
			  </div>
			  <script type="text/javascript">
			function DropDown(el) {
				this.dd = el;
				this.initEvents();
			}
			DropDown.prototype = {
				initEvents : function() {
					var obj = this;

					obj.dd.on('click', function(event){
						$(this).toggleClass('active');
						event.stopPropagation();
					});	
				}
			}

			$(function() {

				var dd = new DropDown( $('#dd') );

				$(document).click(function() {
					// all dropdowns
					$('.wrapper-dropdown-2').removeClass('active');
				});

			});

		</script>
	 <div class="clear"></div>
  </div>
	<div class="header_bottom">
	     	<div class="menu">
	     		<ul>
					<li id="go_home"><a href="/home/item.action?userId=${User.userId}&item=home">主页</a></li>
					<li id="go_cart"><a href="/home/item.action?userId=${User.userId}&item=cart">购物车</a></li>
					<li id="go_order"><a href="/home/item.action?userId=${User.userId}&item=order">我的订单</a></li>
					<li id="go_collection"><a href="/home/item.action?userId=${User.userId}&item=collection">我的收藏</a></li>
					<li id="go_info"><a href="/home/item.action?userId=${User.userId}&item=info">个人信息</a></li>
					<li id="go_address"><a href="/home/item.action?userId=${User.userId}&item=address">收货地址</a></li>
					<li id="go_complaint"><a href="/home/item.action?userId=${User.userId}&item=complaint">投诉</a></li>
					<li id="go_suggest"><a href="/home/item.action?userId=${User.userId}&item=suggest">建议</a></li>
					<li id="go_about"><a href="/home/item.action?userId=${User.userId}&item=about">关于</a></li>
			    	<div class="clear"></div>
     			</ul>
	     	</div>
	     	<div class="search_box">
	     		<form>
	     			<input type="text" value="Search" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}"><input type="submit" value="">
	     		</form>
	     	</div>
	     	<div class="clear"></div>
	     </div>	     	
   </div>
 <div class="main">
    <div class="content">
    	<div class="section group">
				  <div class="">
					  </br>
				  	<h2>填写并核对订单信息</h2>
					  <div class="contact-form">
					  <div class="address-container">
						  </br>
						  <div class="">
							  <h3>请选择收货地址</h3>
						  </div>
						  </br>
						  <c:forEach items="${ReceiptInfoList}" var="receipt">
							  <input class="address-item" type='radio' value='${receipt.id}' name="radio"> &nbsp;&nbsp;&nbsp;收货人：${receipt.name} &nbsp;&nbsp;&nbsp;联系电话：${receipt.phone} &nbsp;&nbsp;&nbsp;地址：${receipt.address} &nbsp;&nbsp;&nbsp;邮编：${receipt.zipCode}
							  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							  </br>
							  </br>
							  </br>
						  </c:forEach>
						  <input type="button" class="myButton" value="新增地址" id="add_address">
						  </br>
					  </div>
					  <div class="add-address" style="display: none;">
						  <br>
						  <div>
							  <span class="name-tip"><label> 收货人 </label></span>
							  <span><input id="name" name="name" type="text" class="textbox" value="${User.name}"></span>
						  </div>
						  <div>
							  <span class="phone-tip"><label> 联系电话 </label></span>
							  <span><input id="phone" name="phone" type="text" class="textbox" value="${User.phone}"></span>
						  </div>
						  <div>
							  <span class="address-tip"><label> 收货地址 </label></span>
							  <span><input id="address" name="address" type="text" class="textbox" value=""></span>
						  </div>
						  <div>
							  <span class="code-tip"><label> 邮政编码 </label></span>
							  <span><input id="code" name="code" type="text" class="textbox" value=""></span>
						  </div>
						  <span><input type="button" class="myButton" value="添加" id="confirm">
							  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							  <input type="button" class="myButton" value="取消" id="cancel"></span>
					  </div>
					  </div>
					  <div class="payMethod-container" style="border-top: 1px solid #C0C0C0;width: 100%">
						  <br>
						  <br>
						  <div>
							  <span>支付方式</span>
						  </div>
						  <br>
						  <div class="pay-method" style="height: 50px;width: 500px;line-height: 50px">
							  <input id="unionpay" type="button" value="银联支付" style="border: 1px solid #C0C0C0;background: #ffffff;margin-left: 20px;height: 30px;width: 80px;font-size: 12px">
							  <input id="wechat" type="button" value="微信支付" style="border: 1px solid #C0C0C0;background: #ffffff;margin-left: 20px;height: 30px;width: 80px;font-size: 12px">
							  <input id="alipay" type="button" value="支付宝支付" style="border: 1px solid #C0C0C0;background: #ffffff;margin-left: 20px;height: 30px;width: 80px;font-size: 12px">
						  </div>
						  <div class="pay-hide" style="display: none;">
							  <span class="pay-select"></span>
						  </div>
						  <br>
						  <br>
					  </div>
					  <div class="remark-container" style="border-top: 1px solid #C0C0C0;width: 100%">
						  <br>
						  <br>
						  <div>
							  <span>订单备注</span>
						  </div>
						  <br>
						  <div class="remark-message" style="height: 50px;width: 600px;line-height: 50px">
							  <input id="message" type="text" value="" placeholder="请输入你的备注信息" style="border: 1px solid #C0C0C0;background: #ffffff;margin-left: 20px;height: 30px;width: 550px;font-size: 12px;padding: 3px">
						  </div>
						  <br>
						  <br>
					  </div>
					  <div class="cart-container" style="border-top: 1px solid #C0C0C0">

						  </br>
                          <div class="">
                              <span>商品清单</span>
                          </div>
						  <c:forEach items="${ShoppingCarGoodsList}" var="goods" varStatus="loop">
						  <div class="cart-model">
							  <div class="cart-model-image">
								  <a href="/home/goodsDetail.action?goodsId=${goods.goodsId}&userId=${User.userId}" target="_blank"><img src="${goods.goodsImage}" alt="" height="50px" width="50px" /></a>
							  </div>
							  <div class="cart-model-info" id="goods-${goods.goodsId}">
								  <h5 style="margin-bottom: 10px">${goods.description}</h5>
								  <h3><a href="/home/goodsDetail.action?goodsId=${goods.goodsId}&userId=${User.userId}" target="_blank">${goods.name}</a></h3>
							  </div>
							  <div class="cart-model-num">
								  <a class="cart-num-change"> - </a>
								  <input id="cart-num-${ShoppingCarList[loop.index].id}" class="cart-goods-num" type="text" value="${ShoppingCarList[loop.index].goodsNum}" minnum="1" readonly>
								  <a class="cart-num-change"> + </a>
							  </div>
							  <div class="cart-model-price">
								  <input id="cart-price-${ShoppingCarList[loop.index].id}" class="cart-price-style" type="text" value="￥${goods.price}" readonly="readonly">
							  </div>
							  <div class="cart-model-subtotal">
								  <input id="cart-subtotal-${ShoppingCarList[loop.index].id}" class="cart-subtotal-style" type="text" value="￥${ShoppingCarList[loop.index].totalFee}" readonly="readonly">
							  </div>
							  <div class="cart-model-delivery">
								  <input id="cart-delivery-${ShoppingCarList[loop.index].id}" class="cart-delivery-fee" type="text" value="快递费：￥${goods.deliveryFee}" readonly="readonly">
							  </div>
						  </div>
                              <br>
						  </c:forEach>
						  </br>
						  </br>
					  </div>

				  </div>

			  </div>
		<div class="cart-bottom" style="width: 100%;height:45px;position: relative;margin-top: 30px;margin-bottom: 30px">
			<span style="position: absolute;right: 200px;top: 50%;margin-top: -10px;width: 90px;height: 20px;font-size: large;font-weight: bold">总共应付：</span>
			<span id="total-price" style="position: absolute;right: 120px;top: 50%;margin-top: -10px;width: 70px;height: 20px;font-size: larger;font-weight: bold;color: red"></span>
			<input class="myButton" onclick="createOrder()" type="button" value="生成订单" style="position: absolute;right: 0">

		</div>
        <div class="pay-model" style="width: 100%;height:45px;margin-top: 30px;margin-bottom: 30px;line-height: 45px;position: relative;display: none">
            <input id="pay-order" type="button" value="去支付" style="border: 1px solid #C0C0C0;background: #ffffff;position: absolute;right: 120px;height: 35px;width: 85px;font-size: 12px">
            <input id="cancel-order" type="button" value="取消订单" style="border: 1px solid #C0C0C0;background: #ffffff;position: absolute;right: 0;height: 35px;width: 85px;font-size: 12px">
        </div>
         </div> 
    </div>
 </div>
   <div class="footer">
   	  <div class="wrap">	
	     <div class="section group">
				<div class="col_1_of_4 span_1_of_4">
						<h4>Information</h4>
						<ul>
						<li><a href="about.html">About Us</a></li>
						<li><a href="contact.html">Customer Service</a></li>
						<li><a href="#">Advanced Search</a></li>
						<li><a href="delivery.html">Orders and Returns</a></li>
						<li><a href="contact.html">Contact Us</a></li>
						</ul>
					</div>
				<div class="col_1_of_4 span_1_of_4">
					<h4>Why buy from us</h4>
						<ul>
						<li><a href="about.html">About Us</a></li>
						<li><a href="contact.html">Customer Service</a></li>
						<li><a href="#">Privacy Policy</a></li>
						<li><a href="contact.html">Site Map</a></li>
						<li><a href="#">Search Terms</a></li>
						</ul>
				</div>
				<div class="col_1_of_4 span_1_of_4">
					<h4>My account</h4>
						<ul>
							<li><a href="contact.html">Sign In</a></li>
							<li><a href="index.html">View Cart</a></li>
							<li><a href="#">My Wishlist</a></li>
							<li><a href="#">Track My Order</a></li>
							<li><a href="contact.html">Help</a></li>
						</ul>
				</div>
				<div class="col_1_of_4 span_1_of_4">
					<h4>Contact</h4>
						<ul>
							<li><span>+91-123-456789</span></li>
							<li><span>+00-123-000000</span></li>
						</ul>
						<div class="social-icons">
							<h4>Follow Us</h4>
					   		  <ul>
							      <li><a href="#" target="_blank"><img src="/images/icon/facebook.png" alt="" /></a></li>
							      <li><a href="#" target="_blank"><img src="/images/icon/twitter.png" alt="" /></a></li>
							      <li><a href="#" target="_blank"><img src="/images/icon/skype.png" alt="" /> </a></li>
							      <li><a href="#" target="_blank"> <img src="/images/icon/dribbble.png" alt="" /></a></li>
							      <li><a href="#" target="_blank"> <img src="/images/icon/linkedin.png" alt="" /></a></li>
							      <div class="clear"></div>
						     </ul>
   	 					</div>
				</div>
			</div>			
        </div>
    </div>
    <script type="text/javascript">
        function countTotalPrice() {
		    var sum = 0;
		    for(var i=0;i<$(".cart-model").length;i++){
				var totalFeeArr =  $(".cart-model").eq(i).find(".cart-subtotal-style").val().split("￥");
				var deliveryFeeArr =  $(".cart-model").eq(i).find(".cart-delivery-fee").val().split("￥");
				sum += Number(totalFeeArr[1]);
				sum += Number(deliveryFeeArr[1]);
			}
			$("#total-price").text("￥"+sum);
        }
        function createOrder() {
			//判断支付方式是否选择
			if($(".pay-select").text() == ""){
			    alert("请选择支付方式");
			}else{
                for(var i=0;i<$(".cart-model").length;i++){
                    var userId = "${User.userId}";
                    var goodsIdArr = $(".cart-model").eq(i).find(".cart-model-info").attr("id").split("-");
                    var goodsId = goodsIdArr[1];
                    var goodsNum = $(".cart-model").eq(i).find(".cart-goods-num").val();
                    var deliveryFeeArr = $(".cart-model").eq(i).find(".cart-delivery-fee").val().split("￥");
                    var deliveryFee = deliveryFeeArr[1];
                    var subtotalArr = $(".cart-model").eq(i).find(".cart-subtotal-style").val().split("￥");
                    var finalTotalFee = Number(subtotalArr[1]) + Number(deliveryFee);
                    var receiptId;
                    for(var j=0;j<$(".address-item").length;j++){
                        if($(".address-item").eq(j).is(':checked')){
                            receiptId = $(".address-item").eq(j).val();
                        }
                    }
                    var status = "未支付";
					var message = $("#message").val();
					var payMethod = $(".pay-select").text();
					//alert(userId+"---"+goodsId+"---"+goodsNum+"---"+deliveryFee+"---"+finalTotalFee+"---"+receiptId+"---"+status+"---"+message+"---"+payMethod);
                    $.ajax({
                        url:"/module/addOrder.action",
                        type:"post",
                        dataType:"json",
                        data:{
                            userId:userId,
                            goodsId:goodsId,
                            goodsNum:goodsNum,
                            deliveryFee:deliveryFee,
                            finalTotalFee:finalTotalFee,
                            receiptId:receiptId,
                            status:status,
                            message:message,
                            payMethod:payMethod
                        },
                        success:function (data) {
                            if(data.status == "add_order_succeed"){
                            }else if(data.status == "add_order_failed"){
                                alert("添加失败");
                            }
                        },
                        error:function (e) {
                            alert("发送生成订单请求失败："+e);
                        }
                    });
                }
                alert("生成订单成功");
				//清空购物车
				$.ajax({
                    url:"/module/clearCart.action",
                    type:"post",
                    dataType:"json",
                    data:{
                        userId:"${User.userId}"
                    },
					success:function (data) {
                        if(data.status == "clear_cart_succeed"){

                        }else if(data.status == "clear_cart_failed"){
                            alert("清空购物车失败");
                        }
                    },
					error:function (e) {
                        alert("发送清空购物车请求失败："+e);
                    }
				});
                $(".pay-model").show();
			}
        }
		$(document).ready(function() {
		    $(".address-item").eq(0).attr("checked","checked");
		    countTotalPrice();
            $("#add_address").on("click",function () {
                $(".add-address").show();
            });
            $("#cancel").on("click",function () {
                $(".add-address").hide();
            });
			$().UItoTop({ easingType: 'easeOutQuart' });
            $("#confirm").on("click",function () {
                var name = $("#name").val();
                var phone = $("#phone").val();
                var address = $("#address").val();
                var code = $("#code").val();
                if(name == ""){
                    $(".name-tip").text("收货人姓名不能为空！请输入");
                    $(".name-tip").css("color","#FF3030");
                }else if(phone == ""){
                    $(".phone-tip").text("联系电话不能为空！请输入");
                    $(".phone-tip").css("color","#FF3030");
                }else if(address == ""){
                    $(".address-tip").text("收货地址不能为空！请输入");
                    $(".address-tip").css("color","#FF3030");
                }else if(code == ""){
                    $(".code-tip").text("邮政编码不能为空！请输入");
                    $(".code-tip").css("color","#FF3030");
                }else{
                    $.ajax({
                        url:"/module/addAddress.action",
                        type:"post",
                        dataType:"json",
                        data:{
                            name:name,
                            phone:phone,
                            address:address,
                            code:code,
                            userId:${User.userId}
                        },
                        success:function (data) {
                            if(data.status == "add_address_succeed"){
                                alert("添加成功");
                                window.location.href = "/home/goOrder.action?userId=${User.userId}";
                            }else if(data.status == "add_address_failed"){
                                alert("添加失败");
                            }
                        },
                        error:function (e) {
                            alert("发送添加请求失败："+e);
                        }
                    });
                }
            });
			$("#unionpay").on("click",function () {
                $("#unionpay").css("border","2px solid #c9302c");
                $("#wechat").css("border","1px solid #C0C0C0");
                $("#alipay").css("border","1px solid #C0C0C0");
                $(".pay-select").text($("#unionpay").val());
            });
            $("#wechat").on("click",function () {
                $("#wechat").css("border","2px solid #c9302c");
                $("#unionpay").css("border","1px solid #C0C0C0");
                $("#alipay").css("border","1px solid #C0C0C0");
                $(".pay-select").text($("#wechat").val());
            });
            $("#alipay").on("click",function () {
                $("#alipay").css("border","2px solid #c9302c");
                $("#wechat").css("border","1px solid #C0C0C0");
                $("#unionpay").css("border","1px solid #C0C0C0");
                $(".pay-select").text($("#alipay").val());
            });
            $("#pay-order").on("click",function () {
                $.ajax({
                    url:"/module/payOrder.action",
                    type:"post",
                    dataType:"json",
                    data:{
                        userId:"${User.userId}"
                    },
                    success:function (data) {
                        if(data.status == "pay_order_succeed"){
                            alert("支付成功");
                            window.location.href = "/home/item.action?userId=${User.userId}&item=order";
                        }else if(data.status == "pay_order_failed"){
                            alert("支付失败");
                        }
                    },
                    error:function (e) {
                        alert("发送支付订单请求失败："+e);
                    }
                });
            });
            $("#cancel-order").on("click",function () {
                $.ajax({
                    url:"/module/cancelOrder.action",
                    type:"post",
                    dataType:"json",
                    data:{
                        userId:"${User.userId}"
                    },
                    success:function (data) {
                        if(data.status == "cancel_order_succeed"){
                            alert("订单已取消");
                            window.location.href = "/home/item.action?userId=${User.userId}&item=home";
                        }else if(data.status == "cancel_order_failed"){
                            alert("取消失败");
                        }
                    },
                    error:function (e) {
                        alert("发送取消订单请求失败："+e);
                    }
                });
            })
		});
	</script>
    <a href="#" id="toTop"><span id="toTopHover"> </span></a>
<%--<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>--%>
</body>
</html>

